/*
 * $Id: om-Dropdown.js
 * operamasks-ui omDialog 2.1
 *
 * Copyright 2011, AUTHORS.txt (http://ui.operamasks.org/about)
 * Dual licensed under the MIT or LGPL Version 2 licenses.
 * http://ui.operamasks.org/license
 *
 * http://ui.operamasks.org/docs/
 *
 * Depends:
 *  om-core.js
 *  om-dialog.js
 *  om-combo.js
 * @example
 *   $("#dropdownText").omDropdown({
	  dropdown:"#dropdownGrid",width:640,height:320,dialog:true,disabled:false,
	  onDialogOpen:function(dialog){
	  }
	});
	...
	<div id="dropdownGrid">
		<table id="grid"></table>
	</div>
 */
(function($) {
	$.omWidget('om.omDropdown', {
	    options: {
			/**
			 * 实际存放下拉框内容的组件选择器，必填信息。
			 * @type string
			 * @default null
			 * @example
			 *   $("#input").omDropdown({dropdown : "#grid"});
			 */
		    dropdown:null,
			/**
			 * 下拉框的宽度。
			 * @type int
			 * @default 160
			 * @example
			 *   $("#input").omDropdown({width : 160});
			 */
			width:160,
			/**
			 * 下拉框的高度 。
			 * @type int
			 * @default 240
			 * @example
			 *   $("#input").omDropdown({height : 240});
			 */
			height:240,
			/**
			 * 组件是否禁用。
			 * @type Boolean
			 * @default false
			 * @example
			 *   $("#input").omDropdown({disabled : false});
			 */
			disabled : false,
			/**
			 * 下拉框是否以对话框形式渲染,如果以对话框形式渲染，将会弹出一个omDialog，否则以下拉框形式渲染,默认的title为"请选择",modal为true。
			 * @type Boolean
			 * @default false
			 * @example
			 *   $("#input").omDropdown({dialog : false});
			 */
			dialog:false,
			/**
			 * 以对话框形式渲染时，对dialog添加的额外的配置信息，参见omDialog参数配置。
			 * @type Object
			 * @default {}
			 * @example
			 *   $("#input").omDropdown({dialogOptions : {title:'选择'}});
			 */
			dialogOptions:{},
			/**
			 * 值被选中时执行的事情，在调用omDropdown("select",data)时生效。
			 * @type Function
			 * @default 
			 * @example
			 *   $("#input").omDropdown({onSelected : function(dropdown,data){alert("你选择的值是："+data);}});
			 */
			onSelected:function(dropdown,data){},
			/**
			 * 当对话框被打开时所做的操作,当dialog为true,且在dialog被打开之后调用。
			 * @type Function
			 * @default 
			 */
			onDialogOpen:function(dialog){}
		},
        _create:function(){
            var valueEl = this.element;
            var span = $('<span class="om-combo om-widget om-state-default"></span>').insertAfter(valueEl).wrapInner(valueEl);
            this.expandTrigger = $('<span class="om-combo-trigger"></span>').appendTo(span);
			this.dialogDiv=$('<div class="om-dropdown-dialog"></div>').appendTo(span);
			this.options.dialogOptions=$.extend({title:"请选择",autoOpen:false,modal:true},this.options.dialogOptions||{});
        },
		_init:function(){
			var self = this,trigger=self.expandTrigger,input=self.element,op=this.options;
            input.attr('readonly', 'readOnly');
			op.disabled ? input.attr('disabled', true) : input.removeAttr('disabled');
			if(op.dialog){
			   $(op.dropdown).show().appendTo(this.dialogDiv);
			   var dialogOptions = $.extend({width:op.width,height:op.height},op.dialogOptions);
			   $(this.dialogDiv).omDialog(dialogOptions);
			} else {
				$(op.dropdown).hide().addClass("om-widget-content om-dropdown").css("overflow","auto");
			}
            var unusable = op.disabled || op.readOnly;
            if (unusable) {
                trigger.addClass('om-state-disabled');
            } else {
                this._bindEvent();
            }
		},
		_showDropdown:function(){
			var self = this,trigger=self.expandTrigger,input=self.element,op=this.options;

			if(op.dialog){//以对话框形式渲染
			    $(this.dialogDiv).omDialog("open").scrollTop(0);
				if(typeof(op.onDialogOpen)=="function"){op.onDialogOpen($(this.dialogDiv))};
			}else{//直接渲染
				var offset = input.offset();
				var topnum = offset.top+input.outerHeight();
				if($.browser.msie&&($.browser.version == "6.0"||$.browser.version == "7.0")){
					topnum = topnum + 2;
				}
				$(op.dropdown).scrollTop(0).css({position:"absolute", zIndex:2000,left: offset.left,top: topnum,width:op.width,height:op.height})
							  .show();
			}
		},
        //private
        _bindEvent:function(){
            var self = this, options = self.options,input = self.element, 
            expandTrigger = self.expandTrigger;
            var isFocus = false, span = input.parent('span');
            span.mouseenter(function(){   
               if(!options.disabled){
                   span.addClass("om-state-hover");
               }
            }).mouseleave(function(){      
                span.removeClass("om-state-hover");
            }).mousedown(function(e){
                e.stopPropagation(); //document的mousedown会隐藏下拉框，这里要阻止冒泡
            });
            input.focus(function(){
                if(isFocus) 
                    return;
                isFocus = true;
                $('.om-dropdown').hide(); //hide all other dropLists
                span.addClass('om-state-focus');
                if (!options.disabled && !options.readOnly) {
                    self._showDropdown();
                }
            }).blur(function(e){
                isFocus = false;
                span.removeClass('om-state-focus');
                input.removeClass('om-combo-focus');
            });
            expandTrigger.click(function(){
				input.focus();
            }).mousedown(function(){
				span.addClass('om-state-active');
            }).mouseup(function(){
				span.removeClass('om-state-active');
            });
			$(options.dropdown).mousedown(function(e){
                if(!options.dialog){e.stopPropagation();} //document的mousedown会隐藏下拉框，这里要阻止冒泡
            });
            $(document).bind('mousedown.omDropdown',this.globalEvent=function(){
				//对dialog不需要执行
				if(!options.dialog){
					$(options.dropdown).hide();
				}
            });
        },
		/**
		 * 选取数据，在选取数据时，调用onSelected(dropdown,data)事件，并关闭下拉框（或对话框）。
		 * @type Boolean
		 * @default false
		 * @example
		 *   $("#input").omDropdown({disabled : false});
		 */
		select:function(data){
			var options = this.options,dropdown=options.dropdown;
		    if(typeof(options.onSelected)=="function"){options.onSelected(options.dropdown,data);};
			if(options.dialog){
			    this.dialogDiv.omDialog("close");
			} else {
				$(dropdown).hide();
			}
		}
	});
})(jQuery);